import React, { PureComponent } from 'react'
import { Modal, Form, Input, Radio, Cascader, Checkbox, Row, Col, message,Button,Upload } from 'antd';
import { QuestionTypeSelect, HardLevel, QuestionBankCheckbox } from './AntComponents';
import { addQuestion } from '@/services/questionsBank'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
export default class AddModal extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            bank: null,
            subject: '',
            type: '1',
            hardLevel: '1',
            content: '',
            answer: null,
            answerIntroduce: '',
            audit: '0',
            answerA: '',
            answerB: '',
            answerC: '',
            answerD: '',
            answerE: '',
            answerF: '',
            fileList:[]
        }
    }
    changeBank = (e: any) => {
        this.setState({
            bank: e
        })
    }
    changeSubject = (e: any) => {
        this.setState({
            subject: e
        })
    }
    changeType = (e: any) => {
        this.setState({
            type: e,
            answer: null
        })
    }
    changeHardLevel = (e: any) => {
        this.setState({
            hardLevel: e
        })
    }
    changeAnswerOptions = (key: string) => () => {
        this.setState({
            [key]: event.target.value
        })
    }
    changeRadioAnswer = (e: any) => {
        this.setState({
            answer: e.target.value
        })
    }
    changeCheckboxAnswer = (e: any) => {
        this.setState({
            answer: e
        })
    }
    changeContent = (e: any) => {
        this.setState({
            content: e.target.value
        })
    }
    changeAnswerIntroduce = (e: any) => {
        this.setState({
            answerIntroduce: e.target.value
        })
    }
    changeAudit = (e: any) => {
        this.setState({
            audit: e.target.value
        })
    }
    changeFileList=(e:any)=>{
        const fileList = e.fileList;
        let file = null;
        if (fileList.length > 1) {
          file = [fileList[fileList.length - 1]];
        } else {
          file = fileList
        }
        this.setState({
            fileList:file
        })
    }
    submitHandle = () => {
        const { bank, subject, type, hardLevel, content, answer, answerIntroduce, audit,
            answerA, answerB, answerC, answerD, answerE, answerF,fileList } = this.state;
        if (!bank || !subject || !type || !hardLevel || !content || !answer || !answerIntroduce) {
            return message.error('请完善试题信息')
        }
        addQuestion({
            types: bank,
            type,
            subject,
            complexity: hardLevel,
            content,
            a: answerA, b: answerB, c: answerC, d: answerD, e: answerE, f: answerF,
            answer, answer_that: answerIntroduce, is_audit: audit,img:fileList[0].originFileObj
        }).then(res => {
            if (res.status === 1) {
                const { hideAddModal, renderList, currentPage } = this.props
                message.success('添加成功')
                this.setState({
                    bank: null,
                    subject: '',
                    type: '1',
                    hardLevel: '',
                    content: '',
                    answer: null,
                    answerIntroduce: '',
                    audit: '0',
                    answerA: '',
                    answerB: '',
                    answerC: '',
                    answerD: '',
                    answerE: '',
                    answerF: '',
                    fileList:[]
                })
                hideAddModal()
                renderList(currentPage)
            } else {
                message.error('添加失败')
            }
        })
    }
    render() {
        const { addVisible, subjectOptions, hideAddModal } = this.props;
        const { bank, subject, type, hardLevel, content, answer, answerIntroduce,
            answerA, answerB, answerC, answerD, answerE, answerF ,fileList} = this.state;
        const styles = {
            width: '90%', marginBottom: 5
        }
        const answerList = [
            { value: 'A', label: 'A' },
            { value: 'B', label: 'B' },
            { value: 'C', label: 'C' },
            { value: 'D', label: 'D' },
            { value: 'E', label: 'E' },
            { value: 'F', label: 'F' },
        ]
        return (
            <Modal visible={addVisible} title="添加试题" width="1000px" onCancel={hideAddModal} onOk={this.submitHandle}>
                <Form>
                    <Row gutter={20}>
                        <Col span={12}>
                            <FormItem required label="所属题库">
                                <QuestionBankCheckbox value={bank} onChange={this.changeBank} />
                            </FormItem>
                            <FormItem required label="所属科目">
                                <Cascader options={subjectOptions} value={subject} onChange={this.changeSubject} />
                            </FormItem>
                            <FormItem required label="所属题型">
                                <QuestionTypeSelect isModal={true} onChange={this.changeType} value={type} />
                            </FormItem>
                            <FormItem required label="难易程度">
                                <HardLevel isModal={true} value={hardLevel} onChange={this.changeHardLevel} />
                            </FormItem>
                            <FormItem required label="试题内容">
                                <Input.TextArea value={content} style={{ height: 220 }} onChange={this.changeContent} />
                            </FormItem>
                        </Col>
                        <Col span={12}>
                        <FormItem  label="内容图片">
                                <Upload accept=".jpg,.png,.gif" fileList={fileList} onChange={this.changeFileList}><Button>上传图片</Button></Upload>
                            </FormItem>
                            {
                                (type === '1' || type === '2') && <FormItem required label="答案选项">
                                    <div>A：<Input style={styles} onChange={this.changeAnswerOptions('answerA')} value={answerA}></Input></div>
                                    <div>B：<Input style={styles} onChange={this.changeAnswerOptions('answerB')} value={answerB}></Input></div>
                                    <div>C：<Input style={styles} onChange={this.changeAnswerOptions('answerC')} value={answerC}></Input></div>
                                    <div>D：<Input style={styles} onChange={this.changeAnswerOptions('answerD')} value={answerD}></Input></div>
                                    <div>E：<Input style={styles} onChange={this.changeAnswerOptions('answerE')} value={answerE}></Input></div>
                                    <div>F：<Input style={styles} onChange={this.changeAnswerOptions('answerF')} value={answerF}></Input></div>
                                </FormItem>
                            }

                            <FormItem required label="参考答案">
                                {
                                    type === '1' && <RadioGroup options={answerList} onChange={this.changeRadioAnswer} value={answer} />
                                }
                                {
                                    type === '2' && <CheckboxGroup options={answerList} onChange={this.changeCheckboxAnswer} value={answer} />
                                }
                                {
                                    type === '3' && <RadioGroup value={answer} onChange={this.changeRadioAnswer}>
                                        <Radio value="正确">正确</Radio>
                                        <Radio value="错误">错误</Radio>
                                    </RadioGroup>
                                }
                            </FormItem>
                            <FormItem required label="答案解析">
                                <Input value={answerIntroduce} onChange={this.changeAnswerIntroduce} />
                            </FormItem>
                            {/* <FormItem required label="是否审核">
                                <RadioGroup value={audit} onChange={this.changeAudit}>
                                    <Radio value="0">不需要审核</Radio>
                                    <Radio value="1">需要审核</Radio>
                                </RadioGroup>
                            </FormItem>
                           */}
                        </Col>
                    </Row>

                </Form>
            </Modal>
        )
    }
}
